<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <button @click='change("step1")'>第一步</button>
            <button @click='change("step2")'>第二步</button>
            <button @click='change("step3")'>第三步</button>
        </div>

        <!-- keep-alive 保持活跃！！！ -->

        <keep-alive>
            <component :is='name'></component>
        </keep-alive>
        <!-- vue动态组件标志  -->
        <!-- <component :is='name'></component> -->





    </div>
    <script>
        var step1 = {
            template: '<h1>我是第一个组件</h1>',
            created() { console.log('我是第一个组件created') },
            beforeMount() { console.log('我是第一个组件beforeMount') },
            mounted() { console.log('我是第一个组件mounted') },
            beforeUpdate() { console.log('我是第一个组件beforeUpdate') },
            updated() { console.log('我是第一个组件updated') },
            beforeDestroy() { console.log('我是第一个组件beforeDestroy') },
            destroyed() { console.log('我是第一个组件destroyed') },
            // 组件激活状态  组件并没有销毁 
            activated() {
                console.log('我是第一个组件activated')
            },
              // 组件离开状态  组件并没有销毁 
            deactivated() { 
                console.log('我是第一个组件deactivated')
            },

        }
        var step2 = {
            template: '<h1>我是第2个组件</h1>',
            created() { console.log('我是第2个组件created') },
            beforeMount() { console.log('我是第2个组件beforeMount') },
            mounted() { console.log('我是第2个组件mounted') },
            beforeUpdate() { console.log('我是第2个组件beforeUpdate') },
            updated() { console.log('我是第2个组件updated') },
            beforeDestroy() { console.log('我是第2个组件beforeDestroy') },
            destroyed() { console.log('我是第2个组件destroyed') },
            activated() {
                console.log('我是第2个组件activated')
                // axios  去找更新三条  concat
              
            },
            deactivated() { 
                console.log('我是第2个组件deactivated')
            },
        }
        var step3 = {
            template: '<h1>我是第3个组件</h1>',
            created() { console.log('我是第3个组件created') },
            beforeMount() { console.log('我是第3个组件beforeMount') },
            mounted() { console.log('我是第3个组件mounted') },
            beforeUpdate() { console.log('我是第3个组件beforeUpdate') },
            updated() { console.log('我是第3个组件updated') },
            beforeDestroy() { console.log('我是第3个组件beforeDestroy') },
            destroyed() { console.log('我是第3个组件destroyed') },
            activated() {
                console.log('我是第3个组件activated')
            },
            deactivated() { 
                console.log('我是第3个组件deactivated')
            },
        }


        var app = new Vue({
            el: "#app",
            props: [],
            created() {
                //axios


            },
            components: {
                step1,
                step2,
                step3
            },
            beforeMount() { },
            mounted() { },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
            data: {
                name: "step1",
            },

            methods: {

                change(name) {
                    this.name = name
                }
            },
            computed: {},
            watch: {},
            filters: {},
        });


    </script>
</body>

</html>